import { useDidShow, useRouter } from "@tarojs/taro";
import { useApplicationInfo } from "@/store/applicationDataContext";
import { ActionNames, sendAction } from "@/utils/tracking";
import { View } from "@tarojs/components";
import {
  Layout,
  C03TabMenu,
  C04CourseListing,
  C16TalkListing,
  C17ExhibitionListing,
  C18PublicationListing,
  C25AboutMain,
  C05CustomerService,
} from "@/components";
import style from "./index.module.scss";
import { DISCOVER_TABS } from "./discoverData";

function Discover() {
  const { dispatch } = useApplicationInfo();
  const { params } = useRouter();

  useDidShow(() => {
    // In this context ID if exist is tab index

    //@ts-ignore need to discuss
    sendAction(ActionNames.CourseDetailImpression, {});

    if (params.id) {
      dispatch({
        type: "DISCOVER_TAB",
        data: {
          tab: +params.id,
        },
      });
    }
  });

  return (
    <Layout>
      <View className={style["discover-wrapper"]}>
        {/* Tabbed view */}
        <C03TabMenu tabs={DISCOVER_TABS}>
          {/* Tab 1 */}
          <C04CourseListing />
          {/* Tab 2 */}
          <C16TalkListing />
          {/* Tab 3 */}
          <C17ExhibitionListing />
          {/* Tab 4 */}
          <C18PublicationListing />
          {/* Tab 5 */}
          <C25AboutMain />
        </C03TabMenu>
      </View>
      <C05CustomerService />
    </Layout>
  );
}

export default Discover;
